<template>
  <div class="docker">
    <ul>
      <router-link to="/">
        <li :class="{ blue: changeClass == 'home' }">
          <div class="imgs iconfont icon-shouye"></div>
          <p>首页</p>
        </li>
      </router-link>
      <router-link to="/Shopcar">
        <li :class="{ blue: changeClass == 'shopcart' }">
          <div class="imgs iconfont icon-gouwuche"></div>
          <p>购物车</p>
        </li>
      </router-link>
      <router-link to="/Order">
        <li :class="{ blue: changeClass == 'order' }">
          <div class="imgs iconfont icon-dingdan"></div>
          <p>订单</p>
        </li>
      </router-link>
      <router-link to="/Miner">
        <li :class="{ blue: changeClass == 'my' }">
          <div class="imgs iconfont icon-wode"></div>
          <p>我的</p>
        </li>
      </router-link>
    </ul>
  </div>
</template>

<script setup>
import { defineProps, toRefs } from 'vue'
let props = defineProps({
  changeClass: {
    type: String,
  }
})
let { changeClass } = toRefs(props)
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
let store = useStore()

let router = useRouter()



//  
// let goToIndex = () => {
//   store.commit('changeRouterType', 'push')
//   router.back('/')
// }
</script>



<style lang="scss" scoped>
.docker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0rem;
  width: 100%;
  height: 0.5rem;
  background-color: white;
  z-index: 999;
}
ul {
  width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: space-around;
  //   background-color: red;
  a {
    li {
      margin-top: 0.07rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      height: 0.4rem;
      width: 0.4rem;

      .imgs {
        margin-bottom: 0.1rem;
        width: 0.25rem;
        height: 0.2rem;
        font-size: 0.25rem;
      }

      p {
        width: 0.4rem;
        // height: 0.14rem;
        font-size: 0.1rem;
        text-align: center;
      }
    }
  }
}
.gery {
  color: grey;
}
.blue {
  color: blue;
}
</style>